// 封装函数
// vue 创建虚拟DOM / 组件   两步  
// 1.创建虚拟DOM  const vNode=h()  
// 2.挂载真实DOM节点 render()渲染

// const vNode=h()   h()三个参数 
// 1.虚拟DOM节点类型(div,img,组件) 2.虚拟DOM节点属性 3.虚拟DOM节点内容
// render()函数 两个参数 1.虚拟DOM  2.虚拟DOM挂载点
import {h, render}from 'vue'
import  XtxMessage  from  './message.vue'

type props={
    type:'success' | 'error' | 'warning'
    test:string
    duration?:number
}

// 创建真实DOM装VNode
const div=document.createElement('div')
// setAttribute()方法
// 增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值
div.setAttribute('class','xtx-message-container')
// 指定元素节点的最后一个子节点之后添加节点
document.body.appendChild(div)

// 函数必传type test
function Message({type,test,duration=2000}:props){
    // 创建虚拟DOM <XtxMessage type='success'> test</XtxMessage>
     const vNode=h(XtxMessage,{type,test})
    //  挂载到body上
     render(vNode,div)

    // 延时器销毁虚拟DOM
    setTimeout(()=>{
     render(null,div)
    },duration)
}
// 成功
Message.success=(test:string,duration=2000)=>{
    Message({
        type:'success',
        test,
        duration
    })
}
// 失败
Message.error=(test:string,duration=2000)=>{
    Message({
        type:'error',
        test,
        duration
    })
}
// 警告
Message.warning=(test:string,duration=2000)=>{
    Message({
        type:'warning',
        test,
        duration
    })
}



export default Message